<template>
  <div id="login">
    <h1 style="text-align: center">login</h1>
    <input type="text" placeholder="请输入账号" v-model="username" />
    <input type="password" placeholder="请输入密码" v-model="password" />
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      let username = this.username;
      let password = this.password;
      if (!username && !password) {
        alert('账号与密码不能为空');
      } else {
        this.axios.post('/user/login', { username, password }).then((res) => {
          if (res.data.status == 500) {
            console.log('出错了');
          } else if (res.data.msg == '登录成功') {
            localStorage.setItem('token', res.data.token);
            alert('登录成功');
            this.$router.push('/');
            location.reload();
          } else {
            alert('密码错误');
          }
        });
      }
    },
  },
};
</script>

<style scoped>
#login {
  width: 350px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-image: linear-gradient(150deg, #8f3e8f, #8f33cc); */
  background-color: rgb(136, 169, 205);
  color: white;
}
#login input {
  background-color: transparent;
  width: 80%;
  margin: 18px;
  border: none;
  border-bottom: 1px solid;
  outline: none;
  color: white;
}

input::placeholder {
  color: white;
}
#login h1 {
  margin-top: 60px;
  margin-bottom: 30px;
}
#login button {
  margin: 30px;
  width: 100px;
  height: 35px;
  outline: none;
  cursor: pointer;
  background: white;
  transition: all 0.3s;
  border: 1px solid black;
}
#login button:hover {
  color: white;
  background-color: #0997f7;
}
</style>
